<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-3-面板组件</title>
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	
</style>
</head>
<body>
	
	<div class="container">
		<div class="panel panel-primary">
			<div class="panel-heading">基础面板，这是头heading</div>

			<div class="panel-body panel-info">基础面板，这是body</div>
			<div class="panel-footer panel-danger">基础面板，这是footer
			</div>
		</div>

		<div class="panel panel-danger">
			<div class="panel-heading">
				这个是heading头部
			</div>
			<div class="panel-body">
					这个是panel-body
					<br>
					这个是panel-body这个是panel-body这个是panel-body
					这个是panel-body这个是panel-body这个是panel-body
					这个是panel-body这个是panel-body这个是panel-body
					这个是panel-body这个是panel-body这个是panel-body
					这个是panel-body这个是panel-body这个是panel-body
			</div>

			<div class="panel-footer">
				这个是panel-footer 脚标
			</div>
			
		</div>


	<hr>

		<div class="panel panel-default">
			<div class="panel panel-heading">这是heading</div>
			<div class="panel panel-body">body</div>
			<table class="table">
				<thead>
					<tr class="active">
						<th>表格标题</th>
						<th>表格标题</th>
						<th>表格标题</th>
					</tr>
				</thead>

				<tbody>
					<tr class="success">
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>
					<tr class="info">
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>
					<tr class="success">
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>
					
				</tbody>
					
			</table>
		</div>

	<hr>

		<div class="panel panel-default">
			<div class="panel-heading">
				hello
			</div>

			<div class="panel-body">
				panel-body  如果不需要可以直接删除
			</div>

			<ul class="list-group">
				<li class="list-group-item">这是list-group的li</li>
				<li class="list-group-item">这是list-group的li</li>
				<li class="list-group-item">这是list-group的li</li>
			</ul>
		</div>





	</div>










<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
	$("#mytab").click(function(e){
		e.preventDefault()
		$(this).tab("show")
	})




</script>

</body>
</html>